import { StyleSheet, Image, View, FlatList, TouchableOpacity } from 'react-native'
import React, { useEffect, useState } from 'react'
import { Badge, Menu, Text } from 'react-native-paper'
import { reqUnreadMessage } from '@/api/message'
import type { MessageItem, Unread } from '@/types/message'
import { useGetDataList } from '@/hook/useGetDataList'
import { API } from '@/api/message'

import icon_group from '@/assets/images/icon_group.png'
import icon_star from '@/assets/images/icon_star.png'
import icon_new_follow from '@/assets/images/icon_new_follow.png'
import icon_comments from '@/assets/images/icon_comments.png'
import icon_no_message from '@/assets/images/icon_no_message.png'
import icon_create_group from '@/assets/images/icon_create_group.png'
import icon_to_top from '@/assets/images/icon_to_top.png'

const Message = () => {
  // 获取消息列表
  const getDataList = useGetDataList<MessageItem[]>(API.MESSAGE_LIST, 'GET')
  // 获取未读数量
  const [unreadNum, setUnreadNum] = useState<Unread>()
  const getUnread = async () => {
    const res = await reqUnreadMessage()
    setUnreadNum(res)
  }
  useEffect(() => {
    getUnread()
    getDataList.getDataList()
  }, [])

  // 渲染列表
  const renderItem = ({ item }: { item: MessageItem }) => {
    const styles = StyleSheet.create({
      itemLayout: {
        flexDirection: 'row',
        paddingHorizontal: 24,
        marginBottom: 23
      },
      img: {
        width: 52,
        height: 52,
        borderRadius: 30,
        resizeMode: 'contain'
      },
      content: {
        marginLeft: 15
      },
      title: {
        fontSize: 17
      },
      lastMessage: {
        color: '#999',
        marginTop: 3,
        fontSize: 14
      },
      dateLayout: {
        marginLeft: 'auto',
        alignItems: 'flex-end',
        paddingVertical: 3
      },
      lastMessageTime: {
        fontSize: 14,
        color: '#999'
      },
      iconToTop: {
        width: 8,
        height: 16,
        resizeMode: 'contain',
        marginTop: 8
      }
    })
    return (
      <View style={styles.itemLayout}>
        <Image source={{ uri: item.avatarUrl }} style={styles.img}></Image>
        <View style={styles.content}>
          <Text style={styles.title}>{item.name}</Text>
          <Text style={styles.lastMessage}>{item.lastMessage}</Text>
        </View>
        <View style={styles.dateLayout}>
          <Text style={styles.lastMessageTime}>{item.lastMessageTime}</Text>
          <Image source={icon_to_top} style={styles.iconToTop}></Image>
        </View>
      </View>
    )
  }
  // 渲染列表头部
  const ListHeaderComponent = () => {
    const styles = StyleSheet.create({
      container: {
        height: 130,
        flexDirection: 'row',
        justifyContent: 'space-around'
      },
      imgBox: {
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative'
      },
      icon: {
        width: 56,
        height: 56,
        resizeMode: 'contain'
      },
      txt: {
        fontSize: 16,
        marginTop: 10
      },
      bageIcon: {
        backgroundColor: '#f92b47',
        position: 'absolute',
        top: 12,
        right: -6
      }
    })
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.imgBox} activeOpacity={0.7}>
          <Image source={icon_star} style={styles.icon}></Image>
          <Text style={styles.txt}>赞和收藏</Text>
          <Badge size={23} style={styles.bageIcon}>
            {unreadNum?.unreadFavorate}
          </Badge>
        </TouchableOpacity>
        <TouchableOpacity style={styles.imgBox} activeOpacity={0.7}>
          <Image source={icon_new_follow} style={styles.icon}></Image>
          <Text style={styles.txt}>新增关注</Text>
          <Badge size={23} style={styles.bageIcon}>
            {unreadNum?.newFollow}
          </Badge>
        </TouchableOpacity>
        <TouchableOpacity style={styles.imgBox} activeOpacity={0.7}>
          <Image source={icon_comments} style={styles.icon}></Image>
          <Text style={styles.txt}>评论和@</Text>
          <Badge size={23} style={styles.bageIcon}>
            {unreadNum?.comment}
          </Badge>
        </TouchableOpacity>
      </View>
    )
  }
  // 渲染空组件
  const ListEmptyComponent = () => {
    const styles = StyleSheet.create({
      container: {
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        paddingBottom: 200
      },
      emptyImg: {
        width: 100,
        height: 100,
        resizeMode: 'contain'
      },
      emptyTxt: {
        fontSize: 16,
        color: '#999'
      }
    })
    return (
      <View style={styles.container}>
        <Image source={icon_no_message} style={styles.emptyImg}></Image>
        <Text style={styles.emptyTxt}>还没有收到任何消息</Text>
      </View>
    )
  }

  const [visible, setVisible] = React.useState(false)

  const openMenu = () => setVisible(true)

  const closeMenu = () => setVisible(false)
  return (
    <View style={styles.container}>
      {/* 头部 */}
      <View style={styles.header}>
        <Text style={styles.headerTxt}>消息</Text>
        <View style={styles.headerRight}>
          <Menu
            contentStyle={{
              backgroundColor: '#fff',
              borderRadius: 20,
              marginTop: 30,
              paddingHorizontal: 12
            }}
            visible={visible}
            onDismiss={closeMenu}
            anchor={
              <TouchableOpacity activeOpacity={0.7} onPress={openMenu} style={styles.menuBtn}>
                <Image source={icon_group} style={styles.iconGroup}></Image>
                <Text style={styles.groupTxt}>群聊</Text>
                <Badge
                  size={8}
                  style={{
                    backgroundColor: '#f92845',
                    transform: [{ translateY: -15 }, { translateX: -5 }]
                  }}
                ></Badge>
              </TouchableOpacity>
            }
          >
            <TouchableOpacity
              activeOpacity={0.7}
              style={[styles.menuItem, { borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }]}
            >
              <Image source={icon_group} style={styles.menuItemIcon}></Image>
              <Text style={styles.menuItemTxt}>群聊广场</Text>
            </TouchableOpacity>
            <TouchableOpacity activeOpacity={0.7} style={styles.menuItem}>
              <Image source={icon_create_group} style={styles.menuItemIcon}></Image>
              <Text style={styles.menuItemTxt}>创建群聊</Text>
            </TouchableOpacity>
          </Menu>
        </View>
      </View>

      {/* 列表 */}
      <FlatList
        data={getDataList.dataList}
        extraData={unreadNum}
        renderItem={renderItem}
        keyExtractor={(item, index) => `${item.id}-${index}`}
        ListHeaderComponent={ListHeaderComponent}
        ListEmptyComponent={ListEmptyComponent}
        style={{ height: '100%' }}
        refreshControl={getDataList.refreshControl()}
        onEndReachedThreshold={0.1}
        onEndReached={() => getDataList.getDataList()}
      ></FlatList>
    </View>
  )
}

export default Message

const styles = StyleSheet.create({
  container: {
    height: '100%',
    backgroundColor: '#fff'
  },
  header: {
    height: 50,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  headerTxt: {
    fontSize: 18
  },
  headerRight: {
    position: 'absolute',
    right: 10
  },
  menuBtn: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  iconGroup: {
    width: 24,
    height: 24
  },
  groupTxt: {
    marginLeft: 6
  },
  menuItem: {
    flexDirection: 'row',
    height: 46,
    paddingHorizontal: 12,
    alignItems: 'center'
  },
  menuItemIcon: {
    width: 28,
    height: 28,
    resizeMode: 'contain'
  },
  menuItemTxt: {
    fontSize: 16,
    marginLeft: 10
  }
})
